<template>
  <div class="container-box">
    <div id="chartBar" ref="chartBar" style="width:100%;height:100%;"></div>
  </div>
</template>
<script lang="ts">
import * as echarts from 'echarts';
import { defineComponent, ref, nextTick, watch } from 'vue';
export default defineComponent({
  name: 'LineEchart',
  props: {
    nodes: {
      type: Object,
      default: () => { return [] } 
    }
  },
  setup(props) {
    let myChart:any
    const chartBar = ref()
    const data: any = ref([])
    watch(
        () => props.nodes,
        (old, val) => {
          if( val && old !== val) {
            data.value = old;
            initData()
            initChart()
          }
        },
        { immediate: true, deep: true }
    );
    const option: any = ref({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: 'shadow',
          label: {
            show: true,
            color: 'rgba(147, 235, 248, .8)',
          },
        },
        formatter:function(v){
          const data = v.filter(item => item.value)
          return data[0] ? data[0].seriesName+'：' +data[0].value : ''
        },
        backgroundColor: "rgba(0,0,0,.6)",
        textStyle: {
          color: "#FFF",
        }
      },
      title:{
        text: '在线观看人数：',
        textStyle: {
          fontSize: 14
        }
      },
      legend: {
        data: ["最大观看人数", "当前观看人数", '总观看人数'],
        textStyle: {
          color: "#B4B4B4"
        },
        right: "0%",
      },
      grid: {
        left: "40px",
        right: "40px",
        bottom: "30px",
        top: "50px",
      },
      xAxis: {
        data: [],
        type: 'category',
        axisLabel: {
          interval: 0,
          lineHeight: 16,
          formatter: function(params) {
            var newParamsName = "";
              var paramsNameNumber = params.length;
              var provideNumber = 8; //一行显示几个字
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = "";
                  var start = p * provideNumber;
                  var end = start + provideNumber;
                  if (p == rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr;
                }
              } else {
                newParamsName = params;
              }
              return newParamsName;
          }
        }
      },
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: "最大观看人数",
          type: "bar",
          barWidth: 12,
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(86,113,195, 0.2)',
          },
          itemStyle: {
            normal: {
              barBorderRadius: [5, 5, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#5671c3' },
              ]),
              label: {
                show: false, //开启显示
                position: 'top', //在上方显示
                textStyle: {
                  //数值样式
                  color: 'white',
                  fontSize: 12,
                },
              },
            }
          },
          data: []
        },
        {
          name: "当前观看人数",
          type: "bar",
          barWidth: 12,
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(143,204,122, 0.2)',
          },
          itemStyle: {
            normal: {
              barBorderRadius: [5, 5, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#8fcc7a" },
              ]),
              label: {
                show: false, //开启显示
                position: 'top', //在上方显示
                textStyle: {
                  //数值样式
                  color: 'white',
                  fontSize: 12,
                },
              },
            }
          },
          data: []
        },
        {
          name: "总观看人数",
          type: "bar",
          barWidth: 12,
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(250,200,98, 0.2)',
          },
          itemStyle: {
            normal: {
              barBorderRadius: [5, 5, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#fac862" },
              ]),
              label: {
                show: false, //开启显示
                position: 'top', //在上方显示
                textStyle: {
                  //数值样式
                  color: 'white',
                  fontSize: 12,
                },
              },
            }
          },
          data: []
        }
      ]
    })
    const initChart = () => {
      nextTick(() => {
        myChart = echarts.init(chartBar.value)
        myChart && myChart.setOption(option.value)
      })
    }
    const initData = () => {
      const nodes = [
        {ServiceID: data.value[0].ServiceID, StreamID: data.value[0].StreamID, MaxVisitor: data.value[0].MaxVisitor || 0},
        {ServiceID: data.value[0].ServiceID, StreamID: data.value[0].StreamID, CurVisitor: data.value[0].CurVisitor || 0},
        {ServiceID: data.value[0].ServiceID, StreamID: data.value[0].StreamID, AllVisitor: data.value[0].AllVisitor || 0},
      ]
      let  _ydata: number = 0;
      let  _ydata2: number = 0;
      let _ydata3: number = 0;
      let _xdata: any = []
      option.value.series[0].data = []
      option.value.series[1].data = []
        
      nodes && nodes.forEach((item: any, index) => {
        _ydata = (item.MaxVisitor) || 0
        _ydata2= (item.CurVisitor) || 0
        _ydata3= (item.AllVisitor) || 0
        option.value.series[0].data.push(_ydata)
        option.value.series[1].data.push(_ydata2)
        option.value.series[2].data.push(_ydata3)
        
      })
      _xdata = [_ydata, _ydata2, _ydata3]
      option.value.xAxis.data = _xdata
     } 
    return {
      chartBar
    }
  }
})
</script>
<style>
.container-box{
  height: 300px;
  width: 500px !important;
}
</style>